<template>
  <el-row>
    <el-col :span="4">
      <el-switch v-model="RoutingLine" active-text="反馈记录" inactive-text="申请记录" active-value="100" inactive-value="0" @change="activeModify">
      </el-switch>
      <el-table
        :data="tableData"
        style="width: 100%">
      <el-table-column
          prop="class"
          label="班级"
          width="180">
        <template #default="scope">
          <el-tag  size="medium" @click="handleAgree(scope.$index, scope.row)">{{ scope.row.class }}</el-tag>
        </template>
      </el-table-column>
    </el-table></el-col>
    <el-col :span="20">
      <template v-if="active===2">
        <el-table
          :data="tableDataRight.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))"
          :default-sort = "{prop: 'date', order: 'descending'}"
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange">
        <el-table-column
            type="selection"
            width="55">
        </el-table-column>
        <el-table-column type="expand" >
          <template #default="props">
            <el-table :data="props.row.ChildObject" label-position="left" inline class="demo-table-expand">
              <el-table-column label="学分" prop="creditNumber">
              </el-table-column>
              <el-table-column label="申请理由" prop="reason">
              </el-table-column>
              <el-table-column label="申请凭证" prop="pic_path">
                <template #default="scope">
                  <el-image  :src="url+scope.row.pic_path" min-width="70" height="70" alt="" :preview-src-list="url+scope.row.pic_path"></el-image>
                  <!--            v-for="item in scope.row.pic_path.split(',')" v-if="item ? item : '' "-->
                </template>
              </el-table-column>
              <el-table-column label="申请时间" prop="apply_Time">
              </el-table-column>
              <el-table-column label="审批时间" prop="stateTime">
              </el-table-column>
            </el-table>
          </template>
        </el-table-column>
        <el-table-column
            label="Date"
            sortable
            prop="apply_Time">
        </el-table-column>
        <el-table-column label="申请信息">
          <el-table-column
              label="姓名"
              prop="name">
          </el-table-column>
          <el-table-column
              label="班级"
              prop="class">
          </el-table-column>
          <el-table-column
              label="学号"
              prop="account">
          </el-table-column>
          <el-table-column label="状态" prop="state">
            <template #default="scope">
            <span v-if="scope.row.state===0">
              <i class="el-icon-info" style="color: #ccec5b" aria-hidden="true"></i>
            </span>
              <span v-if="scope.row.state===1">
              <i class="el-icon-success" style="color: #39cf7c" aria-hidden="true"></i>
            </span>
              <span v-if="scope.row.state===2">
              <i class="el-icon-error" style="color: #ED3F14" aria-hidden="true"></i>
            </span>
              <span :style="{ color: scope.row.state === 1 ? '#39cf7c' :scope.row.state === 0 ? '#ccec5b':'#ED3F14' }">{{ scope.row.state === 1 ? '已通过' :scope.row.state === 0 ? '待审批':'未通过' }}</span>
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column
            align="right">
          <template #header>
            <el-input
                v-model="search"
                size="mini"
                placeholder="输入关键字搜索"/>
          </template>
        </el-table-column>
      </el-table></template>
      <template v-if="active===1">  <el-table
          :data="tableDataLeft.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))"
          :default-sort = "{prop: 'date', order: 'descending'}"
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange">
        <el-table-column
            type="selection"
            width="55">
        </el-table-column>
        <el-table-column type="expand">
          <template #default="props">
            <el-table :data="props.row.ChildObject" label-position="left" inline class="demo-table-expand">
              <el-table-column label="反馈理由" prop="content">
              </el-table-column>
              <el-table-column label="反馈凭证" prop="pic_path">
                <template #default="scope">
                  <el-image  :src="url+scope.row.pic_path" min-width="70" height="70" alt="" :preview-src-list="url+scope.row.pic_path"></el-image>
                  <!--            v-for="item in scope.row.pic_path.split(',')" v-if="item ? item : '' "-->
                </template>
              </el-table-column>
              <el-table-column label="反馈时间" prop="feedback_Time">
              </el-table-column>
              <el-table-column label="回复时间" prop="fJudge_Time">
              </el-table-column>
            </el-table>
          </template>
        </el-table-column>
        <el-table-column
            label="Date"
            sortable
            prop="feedback_Time">
        </el-table-column>
        <el-table-column label="反馈信息">
          <el-table-column
              label="姓名"
              prop="name">
          </el-table-column>
          <el-table-column
              label="班级"
              prop="class">
          </el-table-column>
          <el-table-column
              label="学号"
              prop="account">
          </el-table-column>
          <el-table-column label="状态" prop="state">
            <template #default="scope">
            <span v-if="scope.row.state===0">
              <i class="el-icon-info" style="color: #ccec5b" aria-hidden="true"></i>
            </span>
              <span v-if="scope.row.state===1">
              <i class="el-icon-success" style="color: #39cf7c" aria-hidden="true"></i>
            </span>
              <span v-if="scope.row.state===2">
              <i class="el-icon-error" style="color: #ED3F14" aria-hidden="true"></i>
            </span>
              <span :style="{ color: scope.row.state === 1 ? '#39cf7c' :'#ccec5b' }">{{ scope.row.state === 1 ? '已回复':'待回复' }}</span>
            </template>
          </el-table-column>
        </el-table-column>

        <el-table-column
            align="right">
          <template #header>
            <el-input
                v-model="search"
                size="mini"
                placeholder="输入关键字搜索"/>
          </template>
        </el-table-column>
      </el-table></template>

    </el-col>
  </el-row>

</template>
<script lang="ts">
import {getLocalAllClass} from "@/network/admin/getLocalAllClass";
import DynamicDate from "@/views/admin/childComps/RequestAndFeedback/DynamicData.vue";
import {getCurrentInstance} from "vue";
import {getClassApply} from "@/network/admin/getClassApply";
import {getClassFeedback} from "@/network/admin/getClassFeedback";

export default {
  name:'RequestAndFeedback',
  components: {DynamicDate},
  data(){
    return{
      tableData: [{
        class:'B200601',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        class:'B200602',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        class:'B200603',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄'
      }, {
        class:'B200604',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄'
      }],
      active:1,
      tableDataRight: [],
      tableDataLeft:[],
      search: '',
      RoutingLine:100,
      url: 'http://localhost:7070'

    }
  },
  setup(){
    const {proxy}:any=getCurrentInstance();
    //获取班级信息
    getLocalAllClass().then(result=>{
      console.log(result.data.result)
      proxy.tableData=result.data.result

    }).catch()


    function handleAgree(index,row){
      console.log(index)
      console.log(row)
      console.log(proxy.RoutingLine)
      const R=proxy.RoutingLine
      // console.log(proxy.active+'活动窗口')
      if(R==0){
        console.log("获取申请")
        getClassApply(row.class).then(result=>{
          console.log(result.data.result)
          proxy.tableDataRight=result.data.result

        }).catch()
      }else {
        console.log("获取反馈")
        getClassFeedback(row.class).then(result=>{
          console.log(result.data.result)
          proxy.tableDataLeft=result.data.result

        }).catch()
      }

    }
    function activeModify() {
      console.log(proxy.active+"huodon")
      const a=proxy.active
      if(a==1){
        proxy.active+=1
      }else {
        proxy.active=1
      }


    }

    return{
      handleAgree,
      activeModify
    }
  }

}
</script>
